import { ViewStyle, StyleSheet, ImageStyle, View } from "react-native"
import { Tabs } from "expo-router"

import { Icon, Text } from "@/components"
import { translate } from "@/i18n"
import { useAppTheme } from "@/theme/context"

export default function TabLayout() {
  const { theme: colors } = useAppTheme()
  return (
    <Tabs
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarStyle: {
          borderTopWidth: 0,
          height: 84,
        },
      })}
    >
      <Tabs.Screen
        name="conversations"
        options={{
          title: "对话",
          tabBarIcon: ({ color }) => <Icon icon={"menu"} color={color}></Icon>,
        }}
      />
      <Tabs.Screen
        name="agents"
        options={{
          title: "创作",
          tabBarIcon: ({ color }) => <Icon icon={"view"} color={color}></Icon>,
        }}
      />
      <Tabs.Screen
        name="gallery"
        options={{
          title: "画廊",
          tabBarIcon: ({ color }) => <Icon icon={"more"} color={color}></Icon>,
        }}
      />
      <Tabs.Screen
        name="me"
        options={{
          title: "我的",
          tabBarIcon: ({ color }) => <Icon icon={"settings"} color={color}></Icon>,
        }}
      />
    </Tabs>
  )
}
